<script lang="ts" setup name="Father">
    import Child1 from './Child1.vue';
    import Child2 from './Child2.vue';
    import { ref } from 'vue';

    let house = ref(4);
    let c1 = ref();
    let c2 = ref();

    function changeChild1Toy() {
        c1.value.toy = '小猪佩奇';
    }

    function changeChild2Toy() {
        c2.value.computer = 'Huawei';
    }

    function getAllChilds(refs: {[key: string]: any}) {
        for (let key in refs) {
            refs[key].book += 2;
        }
    }

    // 向外部提供数据，这样Child就能访问到Father的house了
    defineExpose({ house });
</script>

<template>
    <div class="father">
        <h2>父组件</h2>
        <div>房产：{{ house }}</div>
        <button @click="changeChild1Toy">修改Child1的玩具</button>
        <button @click="changeChild2Toy">修改Child2的玩具</button>
        <button @click="getAllChilds($refs)">让所有Child的书+2</button>
        <Child1 ref="c1"/>
        <Child2 ref="c2"/>
    </div>
</template>

<style scoped>
    .father {
        background-color: gray;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 10px;
    }
    .son2 {
        margin-top: 10px;
    }
</style>